<script setup>
import router from "@/router";
import {
  CaretBottom,
  User,
  Crop,
  EditPen,
  SwitchButton,
  Promotion,
  Management,
} from "@element-plus/icons-vue";
import { useUserStore } from "@/stores";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { baseUrl, userInfo } = storeToRefs(userStore);
const { handleCommand } = userStore;
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <img src="@/assets/logo.png" alt="" />
        <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <el-menu-item index="/article/channel">
            <el-icon><Management /></el-icon>
            <span>文章分类</span>
          </el-menu-item>

          <el-menu-item index="/article/manage">
            <el-icon><Promotion /></el-icon>
            <span>文章管理</span>
          </el-menu-item>

          <el-sub-menu index="/user">
            <template #title>
              <el-icon><location /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/user/profile">
              <el-icon><User /></el-icon>
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="/user/avatar">
              <el-icon><Crop /></el-icon>
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="/user/password">
              <el-icon><EditPen /></el-icon>
              <span>重置密码</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h4>
            黑马程序员:<span>{{ userInfo.nickname || userInfo.username }}</span>
          </h4>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :size="50" :src="userInfo.user_pic || baseUrl" />
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="User" command="/profile"
                  >基本资料</el-dropdown-item
                >
                <el-dropdown-item :icon="Crop" command="/avatar"
                  >更换头像</el-dropdown-item
                >
                <el-dropdown-item :icon="EditPen" command="/password"
                  >重置密码</el-dropdown-item
                >
                <el-dropdown-item :icon="SwitchButton" command="/login"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main><RouterView></RouterView></el-main>
        <el-footer>大事件 @ 2024 Created by 独享世界</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-aside {
  width: 10vw;
  background-color: #232323;
  height: 100vh;
}
.el-aside img {
  margin: 2vw 1vw;
}
.el-aside .el-menu {
  width: 100%;
  margin-top: 2vw;
}
.el-menu .el-menu-item {
  width: 100%;
}
.el-header {
  height: 3vw;
  background-color: white;
  font-size: 1vw;
  line-height: 3vw;
  display: flex;
  justify-content: space-between;
}
.el-header h4 {
  font-weight: normal;
  margin-left: 1vw;
}
.el-header span {
  font-weight: bold;
  margin-left: 0.6vw;
}
.el-header .el-dropdown {
  height: 100%;
  margin-right: 3vw;
}
.el-dropdown span:focus-visible {
  outline: none;
}
.el-dropdown .el-icon {
  margin-left: 0.5vw;
}

.el-footer {
  height: 3vw;
  background: white;
  color: #666666;
  font-size: 0.8vw;
  line-height: 3vw;
  text-align: center;
}
</style>
